<template>
    <div>
        <Table
        border
        stripe
        content="self"
        :columns="columns"
        :data="tableData"
        size="large"
        @on-selection-change="keepSelect"

        /><br/>
        <Page
        :total="pageTotal"
        :current="pageNum"
        :page-size="pageSize"
        show-elevator
        show-total
        placement="top"
        @on-change="handlePage"
        ></Page><br/>
        <ButtonGroup>
            <Button type="primary" @click="add=true">
                <Icon type="ios-add-circle-outline" />
                增加
            </Button>
            <Button type="error" @click="deletePro=true">
                删除
                <Icon type="ios-close-circle-outline"/>
            </Button>
        </ButtonGroup>
        <Modal v-model="update" title="修改项目类别" @on-ok="updateOk" footer-hide>
             <div slot="header" style="fontSize:14px;fontWeight:bold">
                <span>修改项目类别</span>
            </div>
            <div class="center">
                <Form ref="editForm" :model="editForm" :rules="editRules" :label-width="100" style="width:350px">
                    <FormItem label="项目类别名称" prop="editName">
                        <Input type="text" v-model="editForm.editName"/>
                    </FormItem>
                </Form>
            </div>
            <div class="center">
                <Button type="primary" @click="updateOk" style="margin-right:40px">确定</Button>
                <Button @click="updateNotOk">取消</Button>
            </div>
        </Modal>
        <Modal v-model="add" title="添加项目类别" @on-ok="addOk" footer-hide>
             <div slot="header" style="fontSize:14px;fontWeight:bold">
                <span>添加项目类别</span>
            </div>
            <div class="center">
                <Form ref="addForm" :model="addForm" :rules="addRules" :label-width="100" style="width:350px">
                    <FormItem label="项目类别名称" prop="addName">
                        <Input type="text" v-model="addForm.addName" placeholder="请输入项目类别名称..."/>
                    </FormItem>
                </Form>
            </div>
            <div class="center">
                    <Button type="primary" @click="addOk" style="margin-right:40px">确定</Button>
                    <Button @click="addNotOk">取消</Button>
            </div>
        </Modal>
        <Modal v-model="deletePro" title="删除项目类别" @on-ok="deleteOk">
             <div slot="header" style="fontSize:14px;fontWeight:bold">
                <span>删除项目类别</span>
            </div>
            <div class="center warningInfo">
                <Icon type="ios-alert" class="warnIcon"/>确认删除选中的项目类别吗
            </div>

        </Modal>
    </div>
</template>
<script>
export default {
    name:'projectTypeForm',
    data(){
        //检查输入的内容是否为空、含有空格或者含有数字
        const validateInput = (rule, value, callback) => {
            const res=this.common.judgeInput(value);
            if(res===-1){
                callback(new Error('输入只能是汉字或英文符号'));
            }else{
                callback();
            }
        };
        return{
            /**editName绑定行业类别的名称*/
            /**addName绑定要增加的行业类型名称 */
            addForm:{
                addName:'',
            },
            editForm:{
                editName:'',
            },
            addRules:{
                addName:[
                    {required: true, message: '请输入项目类别名称', trigger: 'blur'},
                    { validator: validateInput, trigger: 'blur'}],
            },
            editRules:{
                editName:[
                    {required: true, message: '请输入项目类别名称', trigger: 'blur'},
                    { validator: validateInput, trigger: 'blur'}],
            },
            /**row绑定每行的内容 */
            row:{},
            /**初始化page属性 */
            pageTotal:0,
            pageNum:1,
            pageSize:8,
            /**update,add,deletePro分别绑定弹窗 */
            update:false,
            add:false,
            deletePro:false,
            /**boxVvalue绑定勾选框的值*/
            boxValue:false,
             /**selectList绑定要删除对象的Id*/
            selectList:[],
            columns:[
                {
                   
                    type:'selection',
                    width:50,
                },
                {
                    title:'编号',
                    key:'id',
                    width:80
                },
                {
                    title:'名称',
                    key:'name'
                },
                {
                    title:'操作',
                    key:'action',
                    render: (h, params) => {
                        return h('Button',{
                            props:{
                                type:'primary'
                            },
                            on:{
                                click:()=>{this.updateAction(params.row)}
                            }
                        },'修改');
                    }
                }
            ],
            tableData:[
            ]
        }
    },
    beforeMount(){
        this.pageNum=1;
        this.submitProject();
    },
    methods:{
         /**保存当前页选中的项 */
        keepSelect(selection){
            var i=0;
            this.selectList=[];
            for(i=0;i<selection.length;i++){
                    this.selectList.push(selection[i].id);
            }
        },
        /** 提交获取所有项目信息的请求*/
        submitProject(){
            this.apis.projectApis.getProjectTypes(this.pageNum,this.pageSize,res=>{
                var code=res.code;
                if(code===0){
                    this.tableData=res.data.list;
                    this.pageTotal=res.data.total;
                }else{
                    this.$Message.error(res.msg);
                }
            })
        },
        //翻页
        handlePage(value){
            this.pageNum=value;
            this.submitProject();
        },
        /**点击修改后打开弹窗 */
        updateAction(row){
            this.row=row;
            this.editForm.editName=row.name;
            this.update=true
        },
        /**点击确认修改时的回调 */
        updateOk(){
            this.$refs['editForm'].validate((valid) => {
                if (valid) {
                    var data={
                        id: this.row.id,
                        name: this.editForm.editName
                    }
                    this.apis.projectApis.updateProjectType(data,res=>{
                        var code=res.code;
                        if(code==0){
                            this.$Message.success(res.data);
                            this.pageNum=1;
                            this.submitProject();
                        }else{
                            this.$Message.error(res.msg);
                        }
                        this.update=false;
                    })
                    //修改完之后再将row置空
                    this.row={};
                }
            })
        },
        updateNotOk(){
          this.update=false;
        },
        /**点击确认增加项目类别时的回调 */
        addOk(){
            this.$refs['addForm'].validate((valid) => {
                if (valid) {
                    this.apis.projectApis.addProjectType(this.addForm.addName,res=>{
                        var code=res.code;
                        if(code===0){
                            this.$Message.success(res.data);
                            this.pageNum=1;
                            this.submitProject();
                        }else{
                            this.$Message.error(res.msg);
                        };
                        this.add=false;
                    })
                }
            })



        },
        addNotOk(){
          this.add=false;
        },
        /**点击确认删除项目类别时的回调 */
        deleteOk(){
           if(this.selectList.length!=0){
               this.apis.projectApis.deleteProjectType(this.selectList,res=>{
                   var code=res.code;
                    if(code===0){
                        this.$Message.success(res.data);
                        this.pageNum=1;
                        this.submitProject();
                    }else{
                        this.$Message.error(res.msg);
                    }
                    //不管怎么样，删除之后都要清空选择列表
                    this.selectList=[];
               })
                
            }else{
                this.$Message.warning("请选择项目类别！");
            }
  
        }
    }
}
</script>
<style scoped>
@import "../../../../../static/global.css"; /*引入公共样式*/
</style>
